﻿@page "/chart/donut"

@using Syncfusion.Blazor
@using ThemeHelper
@using Syncfusion.Blazor.Charts

@inject NavigationManager NavigationManager
@inherits SampleBaseComponent;

<SampleDescription>
    <p>This <a target='_blank' href='https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/donut-chart'>Blazor Donut Chart</a> example visualizes the project cost breakdown statistics by using doughnut series in the chart. Datalabel shows the Information about the points.</p>
</SampleDescription>
<ActionDescription>
    <p>In this example, you can see how to render and configure the doughnut chart. To achieve a doughnut in pie series, customize the <code>InnerRadius</code> property of the series. <code>DataLabel</code> is used to represent individual data and its value.</p>
    <p><code>Tooltip</code> is enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices.</p>
    <p>More information about the doughnut series can be found in this <a target='_blank' href='https://blazor.syncfusion.com/documentation/accumulation-chart/chart-types/pie-dough-nut/#doughnut-chart'>documentation section</a>.</p>
</ActionDescription>

<div class="control-section">
    <SfAccumulationChart Title="Mobile Browser Statistics" Theme="@Theme">
        <AccumulationChartLegendSettings Visible="true" Position="LegendPosition.Top">
        </AccumulationChartLegendSettings>
        <AccumulationChartTooltipSettings Enable="true"></AccumulationChartTooltipSettings>
        <AccumulationChartSeriesCollection>
            <AccumulationChartSeries DataSource="@DoughnutChartPoints" XName="Browser" YName="Users" Radius="70%" InnerRadius="40%" Name="Project" Explode="true" ExplodeOffset="10%" ExplodeIndex="3">
                <AccumulationDataLabelSettings Visible="true" Name="DataLabelMappingName">
                    <AccumulationChartDataLabelFont FontWeight="600" Color="white"></AccumulationChartDataLabelFont>
                </AccumulationDataLabelSettings>
            </AccumulationChartSeries>
        </AccumulationChartSeriesCollection>
    </SfAccumulationChart>
</div>

@code{

    private Theme Theme { get; set; }
    public List<DoughnutData> DoughnutChartPoints { get; set; } = new List<DoughnutData>
    {
        new DoughnutData  { Browser =  "Chrome", Users = 37, DataLabelMappingName = "37%" },
        new DoughnutData  { Browser =  "UC Browser", Users = 17, DataLabelMappingName = "17%" },
        new DoughnutData  { Browser =  "iPhone", Users = 19, DataLabelMappingName = "19%" },
        new DoughnutData  { Browser =  "Others", Users = 4, DataLabelMappingName = "4%" },
        new DoughnutData  { Browser =  "Opera", Users = 11, DataLabelMappingName = "11%" },
        new DoughnutData  { Browser =  "Android", Users = 12, DataLabelMappingName = "12%" },
    };

    protected override void OnInitialized()
    {
        Theme = ThemeHelper.GetCurrentTheme(NavigationManager.Uri);
    }

    public class DoughnutData
    {
        public string Browser { get; set; }
        public double Users { get; set; }
        public string DataLabelMappingName { get; set; }
    }
}
